<template>
    <div id="templ">
       <!--1.0图片分类-->
        <div id="cate">
            <!--:style="{width:ulWidth'+'px'}"-->
            <ul v-bind="{style:'width:'+ulWidth+'px'}">
                <li @click="getimages(0)">全部</li>
                 <li v-for="item in cates" @click="getimages(item.id)">{{item.title}}</li>
            </ul>
        </div>
        <!--2.0图片列表-->
        <div id="imglist">
            <ul>
                <li v-for="item in list">
                    <router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
                    <img v-lazy="item.img_url">
                    <div id="desc">
                        <h5 v-text="item.title"></h5>
                        <p v-text="item.zhaiyao"></p>
                    </div>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    import common from '../../kits/common.js';
    import { Toast } from 'mint-ui';
 export default{
    data(){
        return{
            cates:[],
            ulWidth:375,
            list:[]//存储图片数组
        }
    },
     created(){
        this.getcates();
        //加载图片
         var all=0;//获取所有数据
         this.getimages(all);
     },
     methods:{
         getimages(cateid){
             cateid =cateid ||0;
             var url=common.apidomain+"/api/getimages/"+cateid;
             this.$http.get(url).then(function (response) {
                 var body =response.body;
                 if(body.status!=0){
                     Toast(body.message);
                     return;
                 }
                 this.list =body.message;
             })
         },
        getcates(){
            var url =common.apidomain+"/api/getimgcategory";
            this.$http.get(url).then(function (response) {
                var body =response.body;
                if(body.status !=0){
                    Toast(body.message);
                    return;
                }
                this.cates=body.message;
                var width =62;
                var count =body.message.length+1;
                this.ulWidth =width*count;
            })
        }
     }
}
</script>
<style scoped>

    #cate{
        max-width: 375px;
        width:375px;
        overflow-x: auto;
    }
    #cate ul{
        padding-left: 10px;
        margin: 0px;
    }
    #cate li{
        cursor: pointer;
        list-style: none;
        display: inline-block;
        color:#0094ff;
        font-size: 14px;
        padding-left: 6px;
    }
    /*实现图片列表样式*/
    #imglist{

    }
    #imglist ul{
        padding-left: 0px;
    }
    #imglist li {
        list-style: none;
        position: relative;
    }
    #imglist li img{
        width: 100%;
        height: 300px;
    }
    image[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    }
    #desc{
        width: 100%;
        background-color: rgba(0,0,0,0.2);
        position: absolute;
        bottom: 2px;
        left:0px;
    }
    #desc h5{
        color: #fff;
        font-weight: 700;
    }
    #desc p{
        color:#fff;
    }
</style>